<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>商品列表</title>
	<link rel="stylesheet" href="./图标图标/iconfont.css">
	<style type="text/css">
		img {
			width: 300px;
			height: 330px;
		}
		a{
			color:dimgrey;
		}
		#box>li {
			width: 50%;
			list-style: none;
			text-align: center;
			box-sizing: border-box;
			margin: 30px;
			position: relative;
		}

		li>.wrap {
			width: 300px;
			height: 330px;
			margin: 0 auto;
			position: relative;
			border: 1px double lightseagreen;
			cursor: move;
			background-size: 300px 330px;
			transition: all ease-in-out 1s;
		}

		span {
			display: inline-block;
			width: 30px;
			height: 30px;
			background-color: #DDDDDD;
			border-top: 1px solid gray;
			border-bottom: 1px solid gray;
			vertical-align: bottom;
			box-sizing: border-box;
		}

		.reduce {
			border-left: 1px solid gray;
			cursor: pointer;
		}

		.add {
			border-right: 1px solid gray;
			cursor: pointer;
		}

		input {
			width: 60px;
			height: 30px;
			border: none;
			outline: none;
			text-align: center;
			line-height: 30px;
			border: 1px solid gray;
			box-sizing: border-box;
		}

		.money {
			width: 100px;
			height: 30px;
			margin: 0 auto;
			background-color: red;
			color: white;
			text-align: center;
			line-height: 36px;
			border-radius: 4px;
			padding: 0 10px;
			border: none;
			vertical-align: middle;
			cursor: pointer;
		}

		.delete {
			width: 50px;
			height: 30px;
			border: none;
			text-align: center;
			line-height: 30px;
			border-radius: 4px;
			margin: 0 10px;
			border: 1px solid gray;
			cursor: pointer;
		}

		.goodsPrice {
			color: red;
		}

		.fdj {
			width: 300px;
			height: 330px;
			background-size: 500px 500px;
			background-repeat: no-repeat;
			position: absolute;
			border: 1px solid gray;
			top: 5%;
			right: -50%;
			display: none;
			transition: all 1s;
			overflow: hidden;
		}

		.fdj>img {
			width: 1500px;
			height: 1650px;
			vertical-align: middle;
		}

		.gray-box {
			width: 80px;
			height: 80px;
			background-size: 80px 80px;
			opacity: 0.5;
			border: none;
			position: absolute;
			left: 0;
			top: 0;
			display: none;
			pointer-events: none;
		}

		.boss {
			width: 30%;
			height: 80px;
			background-color: azure;
			position: fixed;
			right: 0;
			top: 10%;
			z-index: 1;
			text-align: center;
			list-style: none;
			line-height: 80px;
			font-size: 24px;
			border-radius: 8px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 50%);
		}

		.hot {
			display: block;
			width: 30px;
			height: 15px;
			background-color: red;
			border-radius: 2px;
			z-index: 2;
			position: absolute;
			right: 30%;
			top: 18%;
			text-align: center;
			line-height: 15px;
			font-size: 12px;
			color: white;
		}

		em {
			background-color: turquoise;
			padding: 5px 10px;
			border-radius: 4px;
		}

		.bossor {
			top: 220px;
		}

		.bosser {
			height: 50px;
			line-height: 50px;
			position: fixed;
			top: 15px;
		}

		.jsje {
			display: inline-block;
			width: 60%;
			height: 30px;
			background-color: red;
			z-index: 3;
			margin-left: 20px;
			border-radius: 4px;
			line-height: 30px;
			color: white;
		}
	</style>
</head>

<body>

	<ul id="box"></ul>
	<a href="weidian_dianpu.html">
		<div class="boss bossor bosser vipName"></div>
	</a>
	<a href="weidian_dianpu.html">
		<div class="boss">
			我的购物车<b class="iconfont icon-gouwuche"><i class="hot">hot</i></b>
		</div>
	</a>
	<a href="weidian_dianpu.html">
		<div class="boss bossor">
			结算<b class="iconfont icon-zhifu-01"></b><u class="jsje"></u>
		</div>
	</a>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/ajaxTools.js"></script>
	<script type="text/javascript">
		$(".vipName").innerHTML = document.cookie.split("=")[1]
		function getTypeId() {
			return location.search.split("=")[1];//也就是typeId=001,拿到的是001,002
		}
		//写法一
		// function getGoodsInfo(){
		// 	$.get("php/getGoodsList.php?type="+getTypeId(),function(data){
		// 		// console.log("data",data)
		// 		let arr=JSON.parse(data)
		// 		let htmlStr="";
		// 		arr.forEach(goods=>{
		// 			htmlStr=`
		// 				<li>
		// 					<img src="${goods.goodsImg}" >
		// 					<p>商品名称:${goods.goodsName}</p>
		// 					<p>价格:￥${goods.goodsPrice}</p>
		// 					<p>颜色:${goods.beiyong2}</p>
		// 				</li>
		// 			`;
		// 		});
		// 		$("#box").html(htmlStr)
		// 	})
		// }
		//写法二
		function getGoodsInfo() {
			$.get("php/getGoodsList.php", { "typeId": getTypeId() }, function (data) {
				let htmlStr = "";
				data.forEach(goods => {
					htmlStr += `
							<li>
								<div class="wrap"><img src="${goods.goodsImg}"  class="pic"><span class="gray-box"></span></div>
								<p class="typeId">商品类型:${getTypeId()}</p>
								<p class="goodsId">商品编号:${goods.goodsId}</p>
								<p class="goodsName">商品名称:${goods.goodsName}</p>
								<p>商品单价：￥<i class="goodsPrice">${goods.goodsPrice}</i></p>
								<p>总件数量:${goods.goodsCount}</p>
								<p>颜色:${goods.beiyong2}</p>
								<p><span class="reduce">-</span><input style="text" value="0" class="num"><span class="add">+</span></p>
								<p>小计:<span class="money"></span><span class="delete">删除</span></p>
								<p><em class="up">加入购物车</em></p>
								<div class="fdj"><img src=""></div>
								<hr>
							</li>
							
						`;
				});
				$("#box").html(htmlStr);
				//---------------------------------------------------------
				//加、减、删除
				let adds = $(".add")
				let reduces = $(".reduce")
				let deletes = $(".delete")
				let ups = $(".up")
				for (let i = 0; i < adds.length; i++) {
					adds[i].onclick = function () {
						this.parentNode.getElementsByClassName("num")[0].value = Number(this.parentNode.getElementsByClassName("num")[0].value) + 1;
						this.parentNode.parentNode.getElementsByClassName("money")[0].innerHTML = this.parentNode.parentNode.getElementsByClassName("goodsPrice")[0].innerHTML * Number(this.parentNode.getElementsByClassName("num")[0].value);

					}
					reduces[i].onclick = function () {
						this.parentNode.getElementsByClassName("num")[0].value = Number(this.parentNode.getElementsByClassName("num")[0].value) - 1;
						this.parentNode.parentNode.getElementsByClassName("money")[0].innerHTML = this.parentNode.parentNode.getElementsByClassName("goodsPrice")[0].innerHTML * Number(this.parentNode.getElementsByClassName("num")[0].value);
						if (Number(this.parentNode.getElementsByClassName("num")[0].value) <= 0) {
							this.parentNode.getElementsByClassName("num")[0].value = 0;
							this.parentNode.parentNode.getElementsByClassName("money")[0].innerHTML = 0;
							return;
						}
					}
					deletes[i].onclick = function () {
						this.parentNode.parentNode.remove()
						// ajax2013useobjandpromise({
						// 	method: "post",
						// 	url: "php/deleteGoods.php",
						// 	params: `goodsId=${$(".goodsId").innerHTML}&vipName=${document.cookie.split("=")[1]}`
						// }).then(function (data) {
						// 	if (data == 0) {
						// 		alert("删除失败")
						// 	}
						// 	else {
						// 		alert("删除成功")
						// 	}
						// })
					}
				}
				//-------------------------------------------------------------
				//加入购物车-数量
				let result = 0;
				let count = 0;
				for (let i = 0; i < ups.length; i++) {
					ups[i].onclick = function () {
						if (true) {
							n = Number(this.parentNode.parentNode.getElementsByClassName("num")[0].value);
							m = Number(this.parentNode.parentNode.getElementsByClassName("money")[0].innerHTML)
							// console.log("n", n)
							// console.log("m", m)
							$(".hot")[0].innerHTML = sumGoodsResult(result)
							$(".jsje")[0].innerHTML = sumGoodsCount(count)
							ajax2013useobjandpromise({
								method: "post",
								url: "php/addShoppingCart.php",
								params: `goodsId=${($(".goodsId").html()).split(":")[1]}&vipName=${document.cookie.split("=")[1]}&goodsCount=${$(".num").val()}`
							}).then(function (data) {
								if (data == "1") {
									getGoodsInfo()
									alert("商品添加成功！")
								}
								else {
									alert("商品添加失败，请重试！")
								}
							})
						}
						else {
							alert("亲，您还没有选好商品吗？")
						}
					}
				}
				function addGoods(){
					let goodsIdList=$(".goodsId")
					for(let i=0;i<goodsIdList.length;i++){

					}
				}
				addGoods()
				// 求购物车中商品数量之和
				function sumGoodsResult(result) {
					// 1、获取所有的文本框（数量）；
					let nums = $(".num")
					for (let i = 0; i < nums.length; i++) {
						result += Number(nums[i].value);
					}
					return result;
				}
				// 求购物车中商品金额之和
				function sumGoodsCount(count) {
					// 1、获取所有的文本框（数量）；
					let moneys = $(".money")
					for (let i = 0; i < moneys.length; i++) {
						count += Number(moneys[i].parentNode.parentNode.getElementsByClassName("money")[0].innerHTML)
					}
					return count;
				}
				//--------------------------------------
				//放大镜
				let wraps = $(".wrap .pic")
				for (let i = 0; i < wraps.length; i++) {
					$(".gray-box img").src = wraps[i].src;
					$(".fdj img")[i].src = wraps[i].src;
					wraps[i].onmouseenter = function () {
						$(".gray-box")[i].style.display = "block";
						$(".fdj")[i].style.display = "block"
					}
					wraps[i].onmouseleave = function () {
						$(".gray-box")[i].style.display = "none";
						$(".fdj")[i].style.display = "none"
					}
					wraps[i].onmousemove = function (event) {
						let lf = event.offsetX - Number($(".gray-box")[i].offsetWidth) / 2;
						let tp = event.offsetY - Number($(".gray-box")[i].offsetWidth) / 2;
						if (lf <= 0) {
							$(".gray-box")[i].style.left = "0px";
						} else {
							$(".gray-box")[i].style.left = lf + "px"
						}
						if (tp <= 0) {
							$(".gray-box")[i].style.top = "0px";
						} else {
							$(".gray-box")[i].style.top = tp + "px";
						}
						if (lf >= 220) {
							$(".gray-box")[i].style.left = "220px";
						}
						if (tp >= 250) {
							$(".gray-box")[i].style.top = "250px";

						}
						$(".fdj img")[i].style.marginLeft = -(lf) * 5 + "px";
						$(".fdj img")[i].style.marginTop = -(tp) * 5 + "px";
					}

				}

			}, "json")
		}
		// ----------------
		$(function () {
			//获取商品信息
			getGoodsInfo()
		})
		// 获取商品列表----------------
		$.ajax({
			url: "php/getGoodsList.php",
			data: { "goodsId": $(".gooodsId").innerHTML },
			success: function (data) {
				let arr = JSON.parse(data)
				for (let i = 0; i < arr.length; i++) {
					if ($(".num").val() > 0) {
						$(".money").html(arr[i].goodsPrice * $(".num").val())
					}

				//--------------------
				}
			}
		})
		$(".bosser").html(document.cookie.split("=")[1])

	</script>
</body>

</html>